<template id="custom-upload">
    <div class="upload-warp">
        <div class="upload-box">
            <v-file-input counter hide-input :accept="accept" truncate-length="42" prepend-icon="mdi-plus" v-model="importFile" @change="handleUpload" :multiple="multiple">
            </v-file-input>
        </div>
        <ul>
            <template v-if="!this.multiple">
                <li class="files" v-show="fileName != '' ">
                    <span class="black--text text--lighten-1">{{fileName}}</span>
                </li>
            </template>
            <template v-if="this.multiple">
                <li v-for="file in fileList">
                    <span>{{file.name}}</span>
                </li>
                <!-- <li class="files" v-show="fileName != '' ">
                            <span class="black--text text--lighten-1">{{fileName}}</span>
                        </li> -->
            </template>
        </ul>
    </div>
	
</template>
<script type="module">
	Vue.component("custom-upload", {
		template: "#custom-upload",
		props: {
			multiple: Boolean,
			accept: String,
		},
		data: () => ({
			importFile: null,
			fileName: "",
			fileList: [],
		}),
		computed: {},
		watch: {},
		async created() {},
		async mounted() {
			console.log(this.multiple);
		},
		methods: {
			async doUiAction(uiActionId, uiActionData) {
				switch (uiActionId) {
					case "clearFile":
						await this.clearFile();
						break;
					default:
						console.error("[doUiAction] uiActionId not find", { uiActionId });
						break;
				}
			},

			async handleUpload(file) {
				// console.log(file);
				// console.log(this.multiple)
				if (this.multiple) {
					// this.fileList.push(...file)
					this.fileList = file;
				} else {
					this.fileName = file.name;
				}
				this.$emit("on-upload", this.importFile);
				// this.fileName = file.name;
			},
			clearFile() {
				this.fileList.splice(0, this.fileList.length);
				this.fileName = "";
				this.importFile = null;
			},
		},
	});
</script>
<style scoped="">
    .upload-warp{
        display: flex;
    }
	.upload-box {
		width: 200px;
		height: 200px;
		padding-top: 60px;
		border: 1px dashed #8c939d;
		border-radius: 5px;
		background-color: #fbfdff;
	}
	.mdi-plus:before {
		/* content: "\F39A"; */
		color: #8c939d;
		font-size: 40px;
	}
	.v-input {
		justify-content: center;
	}
	.files {
		color: #4caf50;
	}
</style>
